<template>
    <div class="box">
        <aside class="side-l mask">
            <div class="logo">
                <img :src="logoSrc" alt />
            </div>
            <ul>
                <li class="block">
                    <router-link :to="{ name: 'map' }">
                        <i class="iconfont icon-view-tile"></i> 地形编辑器
                    </router-link>
                </li>
                <li class="block">
                    <router-link :to="{ name: 'map' }">
                        <i class="iconfont icon-map"></i> 地图编辑器
                    </router-link>
                </li>
                <li class="block">
                    <router-link :to="{ name: 'robot' }">
                        <i class="iconfont icon-robot-o"></i> 机体编辑器
                    </router-link>
                </li>
                <li class="block">
                    <router-link :to="{ name: 'hero' }">
                        <i class="iconfont icon-Person"></i> 驾驶员编辑器
                    </router-link>
                </li>
                <li class="block">
                    <router-link :to="{ name: 'skill' }">
                        <i class="iconfont icon-speed2"></i> 技能编辑器
                    </router-link>
                </li>
                <li class="block">
                    <router-link :to="{ name: 'weapon' }">
                        <i class="iconfont icon-hurt"></i> 武器编辑器
                    </router-link>
                </li>
            </ul>
        </aside>
        <aside class="side-r">
            <router-view></router-view>
        </aside>
    </div>
</template>

<script>

const baseUrl = 'http://127.0.0.1:9600'
export default {
    data() {
        return {
            logoSrc: `${baseUrl}/assets/images/robotImg/23.png`
        }
    }
}
</script>
<style lang="less">
@import "../../theme.less";
.mask {
    box-shadow: 0 0 20px @theme-line inset;
}
.block:hover {
    color: @theme-line !important;
    text-shadow: 0 0 10px @theme-line;
    box-shadow: 0 0 20px @theme-line inset;
    border-radius: 4px;
    transform: scale(1.1);
    a {
        color: @theme-line !important;
    }
}
a {
    display: flex;
    flex-direction: column;
    color: @theme-text;
    justify-content: center;
    align-items: center;
    text-align: center;
    .iconfont {
        font-size: 24px;
    }
}
.box {
    height: 100vh;
    background-color: @theme;
    display: flex;
    color: @theme-text;
    border: 1px solid @theme-line;
    font-size: 14px;
    .logo {
        padding: 20px 0;
    }
    .side-l {
        width: 90px;
        display: flex;
        flex-direction: column;
        padding: 20px 10px;
        border-right: 1px solid @theme-line;
        li {
            padding: 10px;
            border-bottom: 1px dashed #666;
        }
    }
    .side-r {
        flex: 1 0 0;
    }
}
</style>